import Base from '@/components/Base';
import { Button, Card, Slider, Row, Col, Typography, Divider } from 'antd';
import { KayButton } from '@/components/KayUI';
import webGlControl from './control';
import styles from './index.less';

const { Title, Paragraph, Text } = Typography;

interface State {}

export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
    webGlControl.init('WebGL-three-loaders');
  }

  public willUnmount() {
    webGlControl.destroy();
  }

  public render() {
    const {} = this.state;
    return (
      <Card title="">
        <Divider />

        <Typography>
          <Title level={3}>加载器</Title>
          <Paragraph>
            <Text></Text>
          </Paragraph>
          <Paragraph>gltf格式文档：</Paragraph>
          <a href="https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html#concepts-general">
            https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html#concepts-general
          </a>
        </Typography>

        <div
          id="WebGL-three-loaders"
          style={{ width: '100%', height: '600px', position: 'relative' }}
        />
      </Card>
    );
  }
}
